<template>
	<view class="crm">
		<!-- <u-sticky>
			</u-sticky> -->
		<view class="tops1">
			<view class="search">
				<view class="inp">
					<u-search @change="changeInpFn" :clearabled="true" @clear="search" @search="search" bg-color="#fff" :show-action="false" height="60" search-icon=""
						placeholder-color="rgba(15, 20, 23, 0.3)" placeholder="请输入手机号或微信号" v-model="keyword">
					</u-search>
				</view>
				<view class="btns" @click="search">
					搜索
				</view>
			</view>
			<view class="selectOptions">
				<view class="same">
					<view class="item" @click="changeTab1(index,item.value)" :class="[sel1==index?'active':'']"
						v-for="(item,index) in options1">
						{{item.name}}
					</view>
				</view>
				<view class="same">
					<view class="item" @click="changeTab2(index,item.value)" :class="[sel2==index?'active':'']"
						v-for="(item,index) in options2">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="list1.length" class="list" :style="{'padding-top': paddingTop}">
			<view class="item" v-for="(item,index) in list1">
				<view @click="godetail(item)" class="tops">
					<view class="left">
						<view v-if="item.gender=='MALE'" class="photo">
							{{item.genderName}}
						</view>
						<view v-else class="photo girl">
							{{item.genderName}}
						</view>
						<view class="names">
							<view class="name">
								<view class="fullname">{{item.customerName}}</view>
								<!-- <view class="phone">17782561061</view> -->
								<view class="right">
									<view v-if="item.customerStatus=='CANCEL'" class="status">
										已作废
									</view>
									<view v-else-if="item.customerStatus=='APP'" class="status app">
										已转APP
									</view>
									<view v-else class="status doing">
										维护中
									</view>
								</view>
							</view>
							<view class="code">
								<view style="flex: 1;">
									客户编号：{{item.customerNo}}
									<!-- <text class="copy" @click.stop="copyTextToClipboard(item.customerNo)">
										复制
									</text> -->
								</view>

							</view>
						</view>
					</view>

				</view>
				<view @click="godetail(item)" class="mid">
					{{item.brief}}
				</view>
				<view v-if="item.customerStatus!='CANCEL'" class="bots">
					<view @click="cancel(item)" v-if="item.customerStatus!='APP'" class="item1">
						<image src="https://oss.6mate.cn/mini/Delete-themes.png" mode=""></image>
						<view class="">
							作废
						</view>
					</view>
					<view @click="changeToAPP(item)" v-if="item.customerStatus!='APP'" class="item1">
						<image src="https://oss.6mate.cn/mini/App-store.png" mode=""></image>
						<view class="">转APP用户</view>
					</view>
					<!-- <view class="item1">
						<image src="
https://oss.6mate.cn/mini/Share.png" mode=""></image>
						<view class="">分享</view>
						<button open-type="share" id="shareBtn"></button>
					</view> -->
					<view @click="edit(item)" v-if="item.customerStatus!='APP'" class="item1">
						<image src="https://oss.6mate.cn/mini/Edit-two.png" mode=""></image>
						<view class="">编辑</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		<!-- 
		
		{name:"维护中",value:'COMMON'},
		{name:"已转APP",value:'APP'},
		{name:"已作废",value:'CANCEL'},
		下面的按钮根据状态判断，
		如果是已转APP就没有编辑、作废和转app按钮了
		 如果是已作废没有任何按钮
		 作废按钮弹个确认提示框
		 -->

		<view v-else class="empty" style="padding-top: 150px;">
			<view v-if="!list1.length && senDate" class="emptyAddress-box">
				<u-empty text="暂无内容" mode="news"></u-empty>
			</view>
		</view>

		<!-- 转app -->
		<u-popup close-icon-color="#0F1417" close-icon-size="30" v-model="transferToAppMask" :closeable="true"
			:border-radius="30" mode="center">
			<view class="toAppBox">
				<transferToApp @refreshlist="refreshlist" :curId="curId" :curPhone="curPhone"
					:transferPhone="transferPhone" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		shareMixins
	} from "../../common/share.js"
	import Base64 from 'base-64';
	import CryptoJS from '../../node_modules/crypto-js/crypto-js.js'
	import transferToApp from './components/transferToApp.vue'
	let publicKey =
		`MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEPqHavyfprY52X/RFbuTq8qz9rLnbGPYMTgKZNL2dAp+1lj0zuwJyPf35/Icu1iO0iFps8lJ089oNCJNh1FXKs+sje0bXQIxFr0axmKtaeWzErD/9Iv5hvq01s1sPjZ3x4fvCvStue2rbXlWbm+PmtVssjsBbMajkbgghmM2RwQIDAQAB`

	export default {
		components: {
			transferToApp
		},
		mixins: [shareMixins],
		
		
		data() {
			return {
				paddingTop: '',
				shareMixins: {
					path: '/subPack/crm/index'
					// '/pages/index/index?id=1' // 分享的页面路径
				},

				curId: '',
				curPhone: '',
				transferPhone: '',
				transferToAppMask: false,
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],

				keyword: '',
				gender: "",
				customerStatus: "",
				sel1: 0,
				sel2: 0,
				options1: [{
						name: "全部性别",
						value: ''
					},
					{
						name: "男",
						value: 'MALE'
					},
					{
						name: "女",
						value: 'FEMALE'
					},
				],
				options2: [{
						name: "全部状态",
						value: ''
					},
					{
						name: "维护中",
						value: 'COMMON'
					},
					{
						name: "已转APP",
						value: 'APP'
					},
					{
						name: "已作废",
						value: 'CANCEL'
					},

				]
			}
		},

		onLoad() {

			this.getlist()

			uni.createSelectorQuery().select('.tops1').boundingClientRect((rect) => {
				
				this.paddingTop = rect.height + 12 + 'px'
			}).exec()
		},
		onPullDownRefresh() {

			// uni.showLoading({
			// 	title: '刷新中...',
			// 	mask: true
			// })
			this.formData.page = 1;
			// this.list1 = [];
			this.getlist('fresh');
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
				this.getlist();
			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		methods: {
			changeInpFn(e){
				
				if(e==''){
					this.formData.page = 1;
					this.getlist('fresh');
				}
				
			},
			refreshlist() {
				console.log('~~~~~~~~~~~~~~~~~');
				this.transferToAppMask = false
				// this.formData.page = 1;
				// this.list1 = [];
				// this.getlist();
				
				this.formData.page = 1;
				this.getlist('fresh');
			},
			decryptDES(ciphertext, key) {
				const keyHex = CryptoJS.enc.Utf8.parse(key);
				const decrypted = CryptoJS.DES.decrypt({
					ciphertext: CryptoJS.enc.Hex.parse(ciphertext)
				}, keyHex, {
					mode: CryptoJS.mode.ECB,
					padding: CryptoJS.pad.Pkcs7
				});

				return decrypted.toString(CryptoJS.enc.Utf8);
			},
			// 作废
			cancel(val) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认作废吗？',
					// cancelColor:'#9b9b9b',//删除按钮颜色
					confirmColor: '#F23635', //确定按钮颜色
					success: function(res) {
						if (res.confirm) {
							that.$u.api
								.cancelCustomer({
									id: val.id
								})
								.then((res) => {
									that.formData.page = 1;
									that.list1 = [];
									that.getlist();
								});


						} else if (res.cancel) {

						}
					}
				});

			},
			// 转APP用户
			changeToAPP(val) {
				this.transferToAppMask = true

				this.$u.api
					.getmobile({
						id: val.id
					})
					.then((res) => {

						let {
							decryptMobile,
							desenMobile
						} = res.data
						this.curId = val.id
						this.curPhone = desenMobile
						this.transferPhone = this.decryptDES(decryptMobile, publicKey)
					});
			},
			// 编辑
			edit(val) {
				uni.navigateTo({
					url: "/subPack/crm/addCustomers/index?id=" + val.id
				})
			},
			copyTextToClipboard(text) {
				uni.setClipboardData({
					data: '客户编号：' + text,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000,
						});
					},
					fail: function() {

						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			changeTab1(i, item) {

				this.sel1 = i
				this.gender = item
				// this.formData.page = 1
				// this.list1 = []
				// this.getlist();
				
				this.formData.page = 1;
				this.getlist('fresh');
			},
			changeTab2(i, item) {
				console.log(item, 7777777);
				this.sel2 = i
				this.customerStatus = item
				// this.formData.page = 1
				// this.list1 = []
				// this.getlist();
				
				this.formData.page = 1;
				this.getlist('fresh');
			},

			search() {

				// if (!this.keyword) {
				// 	this.$u.toast('请输入查询条件！');
				// 	return;
				// }
				// this.formData.page = 1
				// this.list1 = []
				// this.getlist();
				
				this.formData.page = 1;
				this.getlist('fresh');


			},
			getlist(type) {
				this.senDate = false;
				this.$u.api
					.customerPage({
						pageIndex: this.formData.page,
						pageSize: this.formData.pageSize,
						keWord: this.keyword,
						customerStatus: this.customerStatus,
						gender: this.gender
					})
					.then((res) => {
						if (type == 'fresh') {
							this.list1 = [];
						}
						this.senDate = true;
						if (res.code == 'ok') {
							this.total = res.data.entityCount;
							const newlist = res.data.entities;
							this.list1.push(...newlist);

							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}

						} else {

						}
						uni.stopPullDownRefresh()
						uni.hideLoading();
					});
			},

			godetail(e) {
				uni.navigateTo({
					url: "/subPack/crm/detail?id=" + e.id
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f0f2f5;
	}
</style>
<style scoped lang="scss">
	.crm {
		padding: 0 0 24rpx;

		.toAppBox {
			margin: 0 auto;
			width: 670rpx;
			background: #FFFFFF;
		}

		.tops1 {
			background: #FFFFFF;
			padding: 24rpx 32rpx 0;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			z-index: 9;
		}

		.list {
			padding: 0 32rpx 24rpx;

			.item {
				padding: 24rpx;
				margin-bottom: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.bots {
					display: flex;
					align-items: center;
					// justify-content: flex-end;
					justify-content: space-between;

					.item1 {
						// margin-right: 60rpx;
						// flex: 1;
						display: flex;
						align-items: center;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						position: relative;
						&:last-child{
							margin-right: 0;
						}

						#shareBtn {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							opacity: 0;
						}

						view {
							font-weight: 400;
							font-size: 28rpx;
							color: #5C6B8B;
							line-height: 40rpx;
						}

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 8rpx;
						}
					}
				}

				.mid {
					padding: 42rpx 20rpx 34rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #0F1417;
					line-height: 28rpx;
					text-align: justify;
					word-break: break-all;
				}

				.tops {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						flex: 1;
						display: flex;

						// align-items: center;
						.photo {
							border-radius: 50%;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 33rpx;
							width: 72rpx;
							height: 72rpx;
							background: #419FF5;
							margin-right: 16rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							&.girl {
								background: #F54141;
							}
						}

						.names {
							flex: 1;

							.name {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.fullname {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 500;
									font-size: 28rpx;
									color: #0F1417;
									line-height: 33rpx;
								}

								.right {

									.status {
										text-align: right;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: bold;
										font-size: 24rpx;
										color: #6F7274;

										&.app {
											color: #1BAB6B;
										}

										&.doing {
											color: #1767DE;
										}
									}

									.time {
										margin-top: 6rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 24rpx;
										color: rgba(15, 20, 23, 0.4);
										line-height: 28rpx;
									}
								}

								// .phone{
								// 	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								// 	font-weight: 400;
								// 	font-size: 24rpx;
								// 	color: #0F1417;
								// 	line-height: 36rpx;
								// 	margin: 0 16rpx;
								// }


							}

							.code {
								margin-top: 2rpx;
								color: rgba(15, 20, 23, 0.6);
								display: flex;
								align-items: center;

								.copy {
									color: rgba(15, 20, 23, 0.6);
									background: #F6F6F6;
									line-height: 1;
									padding: 8rpx 16rpx;
									border-radius: 86rpx 86rpx 86rpx 86rpx;
								}
							}
						}
					}

				}
			}
		}

		.selectOptions {
			margin-bottom: 8rpx;

			.same {

				display: flex;
				flex-wrap: wrap;

				.item {
					margin-bottom: 16rpx;
					padding: 8rpx 20rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #0F1417;
					line-height: 36rpx;
					margin-right: 24rpx;
					background: #F6F7F9;
					border-radius: 104rpx 104rpx 104rpx 104rpx;

					&.active {
						background: #FA4A53;
						color: #FFFFFF;
					}
				}
			}
		}

		.search {
			margin-bottom: 24rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 152rpx 152rpx 152rpx 152rpx;
			border: 2rpx solid #FA4A53;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.inp {
				flex: 1;
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				margin: 4rpx;
				width: 128rpx;
				height: 56rpx;
				background: #FA4A53;
				border-radius: 152rpx 152rpx 152rpx 152rpx;
			}
		}

	}
</style>
